<template>
	<view class="recruitment">
		<view class="content">
			<view class="title">工种类型</view>
			<view class="modify_input" @click="jobShow=true">
				<text v-if="recruitment_type!=''">{{recruitment_type}}</text>
				<text style="color:#999999" v-else>请选择</text>
				<image src="../../../static/image/drop-down.png"></image>
			</view>	
			<u-picker mode="selector" v-model="jobShow" :default-selector="[0]" :range="jobList" range-key="label"
				@confirm="workType"></u-picker>
			<view class="title">工人人数</view>
			<u-input v-model="num" type="number" placeholder="请输入"  placeholder-style="color:#999999;"/>
			<view class="title">空闲开始时间</view>
			<view class="modify_input" @click="open1">
				<text v-if="start_date!=''">{{start_date}}</text>
				<text style="color:#999999" v-else >请选择</text>
				<image src="../../../static/image/drop-down.png"></image>
			</view>
			<uni-calendar
			    :insert="false"
			    :lunar="true" 
					:date="min_date"
					:start-date="min_date"
			    :end-date="end_date==''?'3000-01-01':end_date"
			    @change="changeLog1"
					ref="calendar1"
					@confirm="confirm1"
					@clean="clean1"
			 />
			<view class="title">空闲结束时间</view>
			<view class="modify_input" @click="open">
				<text v-if="end_date!=''">{{end_date}}</text>
				<text style="color:#999999" v-else>请选择</text>
				<image src="../../../static/image/drop-down.png"></image>
			</view>
			<uni-calendar 
			    :insert="false"
			    :lunar="true" 
					:date="start_date==''?min_date:start_date"
			    :start-date="start_date==''?min_date:start_date"
			    :end-date="'3000-01-01'"
			    @change="changeLog"
					ref="calendar"
					@confirm="confirm"
					@clean="clean"
			 />
			<view class="title">承接区域</view>
			<view class="modify_input" @click="addressShow=true">
				<text v-if="address!=''">{{address}}</text>
				<text style="color:#999999" v-else>请选择</text>
				<image src="../../../static/image/drop-down.png"></image>
			</view>	
			<u-select v-model="addressShow" mode="mutil-column-auto" :list="cityList" @confirm="confirmCity"></u-select>
		</view>
		<view class="operation">
			<view class="determine" v-if="state" @click="determine">确定</view>
			<view class="determine" v-else @click="determine">保存</view>
		</view>
	</view>
</template>

<script>
	import api from '@/static/js/api.js'
	import request from '@/static/js/request.js'
	
	export default {
		data() {
			return {
				jobShow:false,
				recruitment_type:'',
				recruitment_type_id:'',
				num:'',
				address:'',
				addressShow:false,
				userinfo: {},
				cityList: [],
				jobList: [],
				city_id:'',
				area_id:'',
				start_date:'',
				end_date:'',
				start_time_show:'',
				end_time_show:'',
				mode:'date',
				min_date:'',
				startShow: false,
				endShow: true,
				defaultStartTime: '',
				defaultSelector: [0],
				params: {
					year: true,
					month: true,
					day: true
				},
				sdate:'2021-02-03',
				edate:'2021-09-21',
				date: '2021-02-03',
				range:'',
				province_id:'',
				city_id:'',
				area_id:'',
				datas:{},
				id:'',
				datalist:[],
				state:true
			}
		},
		onLoad(e) {
			this.min_date = this.getNowFormatDate()
			this.userinfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.tageMethod()
			this.cityListMethod()
			if(Object.keys(e).length > 0){
				this.datas = JSON.parse(e.datalist)
				this.id = e.id
				this.state = JSON.parse(e.state)
			}
		},
		onShow() {},
		methods: {
			getdata(){
				api.jobDetails('jhj.work.information.release','_api_work_detail',this.userinfo.access_token,this.userinfo.uid,this.id).then(res=>{
					this.datalist = res.data[0]
					var datas = this.datas
					this.recruitment_type = datas.work_type_name
					this.jobList.forEach(item=>{
						if(item.label == datas.work_type_name){
							this.recruitment_type_id = item.value
						}
					})
					this.num = datas.number
					this.start_date = datas.begin_date
					this.end_date = datas.end_date
					this.cityList.forEach((item,i)=>{
						item.children.forEach((citem)=>{
							if(citem.label == datas.city_name){
								this.city_id = citem.value
								if(citem.label==this.cityList[i].label){
									this.address = citem.label
								}else{
									this.address = this.cityList[i].label + citem.label
								}
								this.province_id = this.cityList[i].value
							}
						})
					})
				})
			},
			workType(e){
				this.recruitment_type = this.jobList[e[0]].label
				this.recruitment_type_id = this.jobList[e[0]].value
			},
			confirmCity(e){
				if (e[0].label == e[1].label) {
					this.address = e[0].label
				} else {
					this.address = e[0].label + ' ' + e[1].label
				}
				this.province_id = e[0].value
				this.city_id = e[1].value
				this.area_id = e[2].value
				console.log(this.province_id,this.city_id,this.area_id);
			},
			determine(){
				if (this.recruitment_type == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择工种类型'
					})
					return
				}
				if (this.num == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入工人人数'
					})
					return
				}
				if (this.start_date == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择空闲开始时间'
					})
					return
				}
				if (this.end_date == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择空闲结束时间'
					})
					return
				}
				if (this.address == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择承接区域'
					})
					return
				}
				
				if(Object.keys(this.datas).length > 0){
					let data = {
						model: "jhj.work.information.release",
						function_name: "_api_work_write",
						access_token: this.userinfo.access_token,
						uid: this.userinfo.uid,
						work_type: this.recruitment_type_id,
						number: this.num,
						begin_date: this.start_date,
						end_date: this.end_date,
						state_id: this.province_id,
						city_id: this.city_id,
						work_id:this.id
					};
					request.post('/api/v1/getattr/0', data).then(resp => {
						uni.navigateBack()
					}).catch(e => {
						uni.showToast({
							icon: 'none',
							title: e.message
						})
					})
				}else{
					let data = {
						model: "jhj.work.information.release",
						function_name: "_api_work_create",
						access_token: this.userinfo.access_token,
						uid: this.userinfo.uid,
						work_type: this.recruitment_type_id,
						number: this.num,
						begin_date: this.start_date,
						end_date: this.end_date,
						state_id: this.province_id,
						city_id: this.city_id,
						region:this.address
					};
					request.post('/api/v1/getattr/0', data).then(resp => {
						uni.navigateBack()
					}).catch(e => {
						uni.showToast({
							icon: 'none',
							title: e.message
						})
					})
				}
			},
			cityListMethod() {
				api.cityApi('res.country.state', '_api_get_information_in_bulk_area', this.userinfo.access_token).then(
					res => {
						this.cityList = res.data
						if(Object.keys(this.datas).length > 0){
							this.getdata()
							// var datas = this.datas
							// this.recruitment_type = datas.work_type_name
							// this.jobList.forEach(item=>{
							// 	if(item.label == datas.work_type_name){
							// 		this.recruitment_type_id = item.value
							// 	}
							// })
							// this.num = datas.number
							// this.start_date = datas.begin_date
							// // this.min_date = datas.begin_date
							// this.end_date = datas.end_date
							// this.cityList.forEach((item,i)=>{
							// 	item.children.forEach((citem)=>{
							// 		if(citem.label == datas.city_id){
							// 			this.city_id = citem.value
							// 			if(citem.label==this.cityList[i].label){
							// 				this.address = citem.label
							// 			}else{
							// 				this.address = this.cityList[i].label + citem.label
							// 			}
							// 			this.province_id = this.cityList[i].value
							// 		}
							// 	})
							// })
						}
					}).catch(e => {
					uni.showToast({
						icon: 'none',
						title: e.message
					})
				})
			},
			tageMethod() {
				api.cityApi('res.country.state', '_api_get_information_in_bulk_area_reverse', this.userinfo.access_token)
					.then(
						res => {
							let objData = res.data.tag
							for (let key in objData) {
								let obj = {}
								obj.value = objData[key]
								obj.label = key
								this.jobList.push(obj)
							}
						}).catch(e => {
						uni.showToast({
							icon: 'none',
							title: e.message
						})
					})
			},
			getNowFormatDate() {
				var date = new Date();
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate;
				return currentdate;
			},
			confirm(e){
				this.end_date = e.fulldate
			},
			open(){
				this.$refs.calendar.open();
			},
			clean(){
				this.$refs.calendar.close();
			},
			confirm1(e){
				this.start_date = e.fulldate
			},
			open1(){
				this.$refs.calendar1.open();
			},
			clean1(){
				this.$refs.calendar1.close();
			}
		}
	}
</script>

<style lang="less" scoped>
	.recruitment {
		.content{
			padding: 8rpx 30rpx 0;
			height: calc(100vh - 154rpx);
			position: relative;
			overflow-y: auto;
			.title{
				font-size: 34rpx;
				font-weight: bold;
				color: #333333;
				margin-left: 8rpx;
				margin-top: 42rpx;
			}
		}
		.operation{
			width: 100%;
			height: 154rpx;
			padding: 20rpx 40rpx 0;
			border-top: 2rpx solid #E8E9EE;
			position: fixed;
			bottom: 0rpx;
			display: flex;
			justify-content: space-between;
			font-size: 34rpx;
			background: #fff;
			.reset{
				width: 210rpx;
				height: 94rpx;
				background: #F4F6F8;
				border-radius: 4rpx;
				text-align: center;
				line-height: 94rpx;
				color: #333333;
			}
			.determine{
				// width: 440rpx;
				width: 100%;
				height: 94rpx;
				background: linear-gradient(146deg, #FE4D60 5%, #FF7C89 100%);
				border-radius: 4rpx;
				text-align: center;
				line-height: 94rpx;
				color: #FFFFFF;
			}
		}
	}
	/deep/.u-input{
		margin-top: 22rpx;
		height: 74rpx;
	}
	/deep/input{
		// background: #F4F6F8;
		padding-left: 30rpx;
		border: 2rpx solid #E5E5E5;
		background: #fff;
	}
	/deep/textarea{
		width: 100%;
		height: 200rpx!important;
		border: 2rpx solid #E5E5E5;
		background: #fff;
		padding-left: 30rpx!important;
		padding-right: 30rpx!important;
		padding-top: 18rpx!important;
		margin-bottom: 30rpx;
		margin-top: 22rpx;
		box-sizing: border-box;
	}
	/deep/.u-input__right-icon{
		display: none;
	}
	/deep/.u-select__body__picker-view picker-view-column:nth-child(3) {
		display: none!important;
	}
	.modify_input{
		width: 690rpx;
		height: 74rpx;
		border: 2rpx solid #E5E5E5;
		background: #fff;
		border-radius: 4rpx;
		line-height: 74rpx;
		margin-top: 22rpx;
		color: #333333;
		position: relative;
		
		text{
			font-size: 28rpx;
			padding-left: 30rpx;
			padding-top: 18rpx;
		}
		image{
			position: absolute;
			width: 26rpx;
			height: 16rpx;
			top: 50%;
			right: 20rpx;
			transform: translate(0,-50%);
		}
	}
	/deep/.uni-calendar__backtoday{
		display: none!important;
	}
</style>
